<template>
	<view class="mine-container">
		<!-- 个人信息卡片 -->
		<view class="user-card">
			<view class="user-bg"></view>
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{ userInfo.name }}</view>
					<view class="desc">{{ userInfo.desc }}</view>
				</view>
				<view class="edit-btn" @click="editProfile">
					<image src="/image/bianji.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="stats">
				<view class="stat-item" @click="goToMyExams">
					<text class="value">{{ userStats.exams }}</text>
					<text class="label">考试</text>
				</view>
				<view class="divider"></view>
				<view class="stat-item" @click="goToCollections">
					<text class="value">{{ userStats.collections }}</text>
					<text class="label">收藏</text>
				</view>
				<view class="divider"></view>
				<view class="stat-item" @click="goToWrong">
					<text class="value">{{ userStats.wrongQuestions }}</text>
					<text class="label">错题</text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/mine/myExams')">
					<view class="menu-left">
						<image src="/image/dingdan.png" mode="aspectFit"></image>
						<text>我的考试</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
				
				<view class="menu-item" @click="goToPage('/pages/mine/collections')">
					<view class="menu-left">
						<image src="/image/shoucang.png" mode="aspectFit"></image>
						<text>我的收藏</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
				
				<view class="menu-item" @click="goToPage('/pages/mine/wrongBook')">
					<view class="menu-left">
						<image src="/image/bianji.png" mode="aspectFit"></image>
						<text>错题本</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/mine/score')">
					<view class="menu-left">
						<image src="/image/chenggong.png" mode="aspectFit"></image>
						<text>成绩查询</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
				
				<view class="menu-item" @click="goToPage('/pages/mine/certificate')">
					<view class="menu-left">
						<image src="/image/tijiao.png" mode="aspectFit"></image>
						<text>我的证书</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/mine/settings')">
					<view class="menu-left">
						<image src="/image/shezhi.png" mode="aspectFit"></image>
						<text>设置</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
				
				<view class="menu-item" @click="handleLogout">
					<view class="menu-left">
						<image src="/image/dengchu.png" mode="aspectFit"></image>
						<text>退出登录</text>
					</view>
					<image class="arrow" src="/image/youjiantou.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '@/http.js'

export default {
	data() {
		return {
			userInfo: {
				avatar: '/image/morentouxiang.png',
				name: '张三',
				desc: '努力学习中...'
			},
			userStats: {
				exams: 12,
				collections: 45,
				wrongQuestions: 23
			},
			loading: false
		}
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		async getUserInfo() {
			this.loading = true;
			try {
				const res = await api.getCurrentUser();
				if (res.code === 1) {  // 文档中成功标志是 code === 1
					if (res.response) {
						const user = res.response;
						this.userInfo = {
							avatar: user.imagePath || '/image/morentouxiang.png',
							name: user.realName || user.userName || '用户',
							desc: `${user.userLevelStr || ''}${user.classes || ''}`
						};
						// 注意: 获取用户信息 API 文档中没有返回 exams/collections/wrongQuestions 字段
						// 这些字段可能需要从其他 API 获取，暂时保持为 0
						this.userStats = {
							exams: 0,
							collections: 0,
							wrongQuestions: 0
						};
					}
				} else {
					console.error('获取用户信息失败:', res.message);
				}
			} catch (err) {
				console.error('获取用户信息失败:', err);
			} finally {
				this.loading = false;
			}
		},
		editProfile() {
			uni.navigateTo({
				url: '/pages/mine/profile'
			});
		},
		goToMyExams() {
			uni.navigateTo({
				url: '/pages/mine/myExams'
			});
		},
		goToCollections() {
			uni.navigateTo({
				url: '/pages/mine/collections'
			});
		},
		goToWrong() {
			uni.navigateTo({
				url: '/pages/mine/wrongBook'
			});
		},
		goToPage(url) {
			uni.navigateTo({
				url: url,
				fail: () => {
					uni.showToast({
						title: '页面开发中',
						icon: 'none'
					});
				}
			});
		},
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗?',
				success: (res) => {
					if (res.confirm) {
						// 清除登录信息
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-container {
	min-height: 100vh;
	background: #FFF5F7;
	
	.user-card {
		position: relative;
		background: #fff;
		margin-bottom: 20rpx;
		overflow: hidden;
		
		.user-bg {
			height: 200rpx;
			background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 100%);
		}
		
		.user-info {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-top: -60rpx;
			position: relative;
			z-index: 1;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 6rpx solid #fff;
				background: #f0f0f0;
			}
			
			.info {
				flex: 1;
				margin-left: 20rpx;
				
				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.desc {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.edit-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFF0F5;
				border-radius: 50%;
				
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		
		.stats {
			display: flex;
			padding: 40rpx 30rpx 30rpx;
			
			.stat-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.value {
					font-size: 40rpx;
					font-weight: bold;
					color: #FFB6C1;
					margin-bottom: 8rpx;
				}
				
				.label {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.divider {
				width: 2rpx;
				height: 60rpx;
				background: #FFE4E1;
			}
		}
	}
	
	.menu-section {
		margin-bottom: 20rpx;
		
		.menu-group {
			background: #fff;
			
			.menu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 2rpx solid #FFF5F7;
				transition: background 0.3s;
				
				&:active {
					background: #FFF5F7;
				}
				
				&:last-child {
					border-bottom: none;
				}
				
				.menu-left {
					display: flex;
					align-items: center;
					
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					
					text {
						font-size: 28rpx;
						color: #333;
					}
				}
				
				.arrow {
					width: 24rpx;
					height: 24rpx;
					opacity: 0.3;
				}
			}
		}
	}
}
</style>
